<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>北京市人民政府外事办公室领事保护教育服务平台</title>
<!--[if lt IE 8]>
      <script type="text/javascript">window.location = '/browser';</script>
    <![endif]-->
<link href='<c:url value="/share/bootstrap.min.css"></c:url>'
	rel="stylesheet" type="text/css" />
<link href='<c:url value="/share/bootstrap-theme-dcp.css"></c:url>'
	rel="stylesheet" type="text/css" />
<link href='<c:url value="/share/inside.css"></c:url>' rel="stylesheet"
	type="text/css" />
<link href='<c:url value="/share/report.css"></c:url>' rel="stylesheet"
	type="text/css" />
<!--[if lt IE 9]>
      <script type="text/javascript" src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script type="text/javascript" src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
<link rel="stylesheet" type="text/css"
	href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css" />
<script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
<script src='<c:url value="/js/boot.js"></c:url>'></script>
<script src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>

<style>
html, body {
	font-family: "Microsoft YaHei";
}

a {
	text-decoration: none !important;
}

.wh_index_wrap_header {
	background: #fff;
	margin-bottom: 25px;
}

.summary {
	background: #8ec2ff;
}

.summary ul li {
	width: 25%;
	border-right: 1px solid #fff;
}

.summary, .summary ul {
	height: 95px;
}

.main .panel-body table .max .percent span.bar {
	background: rgb(36, 89, 170);
}

.main .panel-body .survey .page .part h5 {
	color: #295c96;
	font-size: 16px;
}
</style>
</head>
<body>
	<div id="wrap">
		<div class="wh_index_wrap_header">
			<div class="container">
				<p style="font-size: 16px; margin-top: 20px; color: #c4c4c4;">
					问卷名称 : <font style="color: #2459aa;" id = "name">自制手机调查问卷</font>
				</p>
				<p style="margin-top: 18px; color: #c4c4c4;">
					调研方向： <font style="color: #737373;" id = "direction"></font>
				</p>
				<p style="margin-top: 18px; color: #c4c4c4;">
					调研规模： <font style="color: #737373;" id = "scale"></font>
				</p>
				<p style="margin-top: 18px; color: #c4c4c4;">
					创建时间： <font style="color: #737373;" id = "createTime"></font>
				</p>
				<div class="report-header" style="margin-top: 30px;">
					<h4
						style="width: 130px; text-align: center; border-bottom: 4px solid #2459aa; margin: 0; padding-bottom: 10px; color: #2459aa;">
						<span alt="" class="fa fa-pie-chart fa-fw fa-lg"
							style="width: 20px; margin-left: 10px; float: left;"> </span>结果统计
					</h4>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="main">
					<div class="panel">
						<!-- <div class="report-header"> 
              <h4><i class="fa fa-pie-chart fa-fw fa-lg"></i>结果统计</h4></div>  -->
						<div class="summary">
							<ul>
								<li><span class="small">总量</span>
									<p class="lead" id = "all"></p></li>
								<li><span class="small">浏览量</span>
									<p class="lead" id = "scan"></p></li>
								<li><span class="small">完成量</span>
									<p class="lead" id="done"></p></li>
								<li  class="end"><span class="small">完成率</span>
									<p class="lead" id="rate"></p></li>
							</ul>
						</div>
						<div class="panel-body">
							<div class="survey">
								<div class="page" data-sn="37a7e3f4-1748-4faf-9c08-924601bec547">
									<h4 class="page-title"
										style="position: relative; overflow: hidden; background: #fff;">
										<a class="btn btn-link pull-right" id="rotate_tache"
											style="border: 1px solid #c5c5c5; color: #2459aa;"> <i
											class="fa fa-fw fa-chevron-down" data-role="toggle"
											data-toggle-icon="fa-chevron-left fa-chevron-down"
											style="color: #2459aa;"></i>收起
										</a>
									</h4>
									<div class="content" id="wrap_container_content" style="">
									</div>
									</div> 
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	<script>
      $(function() {
          $('#rotate_tache').click(function() {
            if ($(this).children().is(".fa-chevron-down")) {
              $(this).children().addClass("fa-chevron-left").removeClass("fa-chevron-down");
              $("#wrap_container_content").hide();
            } else {
              $(this).children().addClass("fa-chevron-down").removeClass("fa-chevron-left");
              $("#wrap_container_content").show();
            }
          });
          $("#wh_rotate_tache_children").click(function() {
            if ($(this).children().is(".fa-chevron-down")) {
              $(this).children().addClass("fa-chevron-left").removeClass("fa-chevron-down");
              $("#wh_rotate_tache_children_list1").hide();
              $("#wh_rotate_tache_children_list2").hide();
              $("#wh_rotate_tache_children_list3").hide();
            } else {
              $(this).children().addClass("fa-chevron-down").removeClass("fa-chevron-left");
              $("#wh_rotate_tache_children_list1").show();
              $("#wh_rotate_tache_children_list2").show();
              $("#wh_rotate_tache_children_list3").show();
            }
          });
        });
    </script>
	<script type="text/javascript">
    var rootPath = '${rootPath}';
    var paperId = '${paperId}';
    var object = new Object();
    var listData = new Array();
    $(function(){
    	getMap();
    })
    function getMap(){
		var url = rootPath + "/surveyAnalyze/mapData/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {},
			success : function(data) {
				if (data) {
					object = data;
					showMap(data);
					getTestList();
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				mini.alert("失败！");
			}
		});
	}
    
    function showMap(data){
    	$("#name").html(data.name);
    	$("#direction").html(data.direction);
    	$("#scale").html(data.scale);
    	$("#createTime").html(data.createTime.replace("T"," "));
    	$("#all").html(data.all);
    	$("#scan").html(data.scan);
    	$("#done").html(data.done);
    	$("#rate").html(GetPercent(data.done,data.all));
    }
    
    //获取两个整数的百分比
    function GetPercent(num, total) { 
    	num = parseFloat(num); 
    	total = parseFloat(total); 
    	if (isNaN(num) || isNaN(total)) { 
    		return "-"; 
    	} 
    	return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + "%"); 
   } 
	//获取每道题的数据
	function getTestList(){
		var url = rootPath + "/surveyAnalyze/listData/" + paperId;
		$.ajax({
			url : url,
			method : "post",
			dataType : "json",
			data : {},
			success : function(data) {
				if (data) {
					listData = data;
					show(data);
					console.log(data);
				} else {
					//alert("获取信息失败！");
				}
			},
			error : function() {
				mini.alert("失败！");
			}
		});
	}
    function show(data){
    	var html = "";
    	var order = 0;
    	for(var i = 0; i< data.length;i++){
    		order++;
    		var string = "container"+ order;
    		if(data[i].class_id != "问答题"){
    		html +="<div class=\"part select\""
				+"data-sn=\"c4b2867b-fde9-4c98-b84d-6780d49d5188\" "
					+"data-type=\"select\">"
					+"<div class=\"text-right hidden-print\">"
						+"<div class=\"btn-group btn-group-sm\">"
							+"<button  onClick = 'buildPie(\""+i+"\",\""+string+"\",this)' class=\"btn btn-default btn-sm wh_active_cookie\""
								+"type=\"button\" data-chart=\"column\" title=\"查看柱形图\" "
								+"id=\"wh_active_cookie\">"
								+"<i class=\"fa fa-fw fa-bar-chart\"></i>查看饼图"
							+"</button>"
						+"</div>"
					+"</div>"
					+"<div class=\"chart text-center\" style=\"display: none;\">"
						+"<div id=\"container"+order+"\" style=\"min-width: 260px; height: 280px; padding: 0; margin-right: 0px;display:none\"></div>"
					+"</div>"
					+"<h5 class=\"subject\">"+data[i].question+"<span class=\"text-muted small\">("+data[i].class_id+")</span></h5>"
					+"<table class=\"table table-striped table-hover\">"
						+"<thead>"
							+"<tr class=\"text-muted\">"
								+"<th><a href=\"javascript:void(0);\" data-sort=\"rank\" data-dir=\"asc\">选项</a></th>"
								+"<th class=\"text-right\"><a href=\"javascript:void(0);\" "
									+"data-sort=\"count\" data-dir=\"desc\">数据量 <i class=\"fa\" style=\"display: none;\"></i></a></th>"
								+"<th><a href=\"javascript:void(0);\" data-sort=\"count\" "
									+"data-dir=\"desc\">百分比 <i class=\"fa\" style=\"display: none;\"></i></a></th>"
							+"</tr>"
						+"</thead>"
						+"<tfoot>"
							+"<tr><td class=\"text-right\" colspan=\"3\">回答 <strong>"+object.done+"</strong>(100%)<br/></td></tr>"
						+"</tfoot>"
						+"<tbody>";
						if(data[i].class_id=="单选题"||data[i].class_id=="多选题"){
							var str = data[i].selects;
							var arr = str.split(",nwebadjj,_");
							for (var j = 0; j < arr.length; j++) {
								var option = String.fromCharCode(j + 65);
								var precent = GetPercent(data[i].data[option],object.done);
								var per = 0;
								if(data[i].data[option] && object.done!=0){
									per = data[i].data[option] / object.done;
								}
								html +="<tr class=\"max\" data-rank=\"1\" data-count=\"1\" "
									+"data-percent=\"100\" data-color=\"#acd689\">"
									+"<td class=\"options\"><a class=\"need_upgrade filter pull-right\" "
										+"href=\"javascript:void(0);\" data-role=\"filter\" "
										+"data-target=\"c4b2867b-fde9-4c98-b84d-6780d49d5188\""
										+"data-op=\"choose\""
										+"data-option=\"9c31b1bb-ce07-475b-a842-d208984e829b\"></a> <label>" + option + '、' + arr[j] + "</label></td>"
									+"<td class=\"count text-right\">"+data[i].data[option]+"</td>"
									+"<td class=\"percent\"><span class=\"bar hidden-print\" style=\"width:"+parseInt(5+100*per)+"px;\">&nbsp;</span>"+precent+"</td>"
								+"</tr>"
							}
						}else if(data[i].class_id == "判断题"){
							for (var j = 0; j < 2; j++) {
								var itemName = null;
								var selects = null;
								if(j==0){
									itemName = "right";
									selects = "是";
								}else{
									itemName = "wrong";
									selects = "否";
								}
								var value = data[i].data[itemName];
								var precent = GetPercent(data[i].data[itemName],object.done);
								var per = 0;
								if(value && object.done!=0){
									per = value / object.done;
								}
								html +="<tr class=\"max\" data-rank=\"1\" data-count=\"1\" "
									+"data-percent=\"100\" data-color=\"#acd689\">"
									+"<td class=\"options\"><a class=\"need_upgrade filter pull-right\" "
										+"href=\"javascript:void(0);\" data-role=\"filter\" "
										+"data-target=\"c4b2867b-fde9-4c98-b84d-6780d49d5188\""
										+"data-op=\"choose\""
										+"data-option=\"9c31b1bb-ce07-475b-a842-d208984e829b\"></a> <label>" + selects+ "</label></td>"
									+"<td class=\"count text-right\">"+data[i].data[itemName]+"</td>"
									+"<td class=\"percent\"><span class=\"bar hidden-print\" style=\"width:"+parseInt(5+100*per)+"px;\">&nbsp;</span>"+precent+"</td>"
								+"</tr>"
							}
						}
    		}else{
    			html +="<div class=\"part select\""
    				+"data-sn=\"c4b2867b-fde9-4c98-b84d-6780d49d5188\" "
    					+"data-type=\"select\">"
    					+"<div class=\"text-right hidden-print\">"
    						+"<div class=\"btn-group btn-group-sm\">"
    							+"<button  onClick = 'check("+order+")' class=\"btn btn-default btn-sm wh_active_cookie\""
    								+"type=\"button\" data-chart=\"column\" title=\"查看柱形图\" "
    								+"id=\"wh_active_cookie\">"
    								+"<i class=\"fa fa-fw fa-bar-chart\"></i>查看详细答案"
    							+"</button>"
    						+"</div>"
    					+"</div>"
    					+"<h5 class=\"subject\">"+data[i].question+"<span class=\"text-muted small\">("+data[i].class_id+")</span></h5>"
    				+"<div>";
    		}
		html +="</tbody></table></div>";
    	}
    	$("#wrap_container_content").html(html);
    }
    
    function buildPie(text,containerId,BuildThis) {
    	var BuilsThis = BuildThis.parentNode.parentNode.parentNode.children[1];
    	if(BuilsThis.style.display == "block"){
	    	BuilsThis.style.display="none";
    	}else{
    		BuilsThis.style.display="block";
    	}
    	$("#"+containerId+"").show();
		var datas = listData[text].data;//多维数组
		var length = Object.keys(datas).length;
		var pieDatas = new Array();
		var total = 0;
		if(!datas.right){
			for (var i = 0; i < length; i++) {
				var itemName = String.fromCharCode(i + 65);
				var value = datas[itemName];
				if (typeof value == "number" && value > 0) {
					total += value;
					pieDatas.push(new Array(itemName, parseFloat(value)));
				}
			}
		}else{
			for (var i = 0; i < length; i++) {
				var itemName = null;
				if(i==0){
					itemName = "right";
				}else{
					itemName = "wrong";
				}
				var value = datas[itemName];
				if (typeof value == "number" && value > 0) {
					total += value;
					pieDatas.push(new Array(itemName, parseFloat(value)));
				}
			}
		}
		var titleName = "";
		var colors = ['#ff00ff', '#3cb371'];
		var parameters = {
			container : "#"+containerId+"",
			dataMap : pieDatas,
			titleName : "调研结果 (总计："+total+"人)",
			colors : colors,
			yAxisTitle : '人',
			digitNum : 1,
			clickFunc : null
		};
		chartPie = getPie3(parameters);
	}
    
    function check(order){
    	var url = rootPath + "/surveyAnalyze/solutionListMv/" + paperId+"/" + order;
    	mini.open({
			url : url,
			title : "问答题回答列表",
			width : 600,
			height : 400,
			onload : function() {
			},
			ondestroy : function(action) {
			}
		});
    }
    </script>
</body>

</html>